<template>
    <view class="all">
        <view class="colseshow" @click="CloseWindow"></view>
        <view class="head">
            <text>编辑物品</text>
            <image @click="CloseWindow" src="../../../../static/img/myhome/close@3x.png" mode=""></image>
        </view>
        <view class="backgroundcolor">
            <view class="box">
                <view class="oneprice">
                    <text>车牌</text>
                    <input type="text" v-model="FormData.plate_no" placeholder="车牌" />
                </view>
                <view class="oneprice">
                    <text>载重</text>
                    <input type="text" v-model="FormData.capacity" placeholder="载重" />
                    <view>
                        <text>吨</text>
                    </view>
                </view>
                <view class="oneprice">
                    <text>动力类型</text>
                    <radio-group @change="FormData.power_type" class="radio-group">
                        <label class="radio">
                            <radio :value="1" :checked="FormData.power_type==1" />汽油
                        </label>
                        <label class="radio">
                            <radio :value="2" :checked="FormData.power_type==2" />柴油
                        </label>
                        <label class="radio">
                            <radio :value="3" :checked="FormData.power_type==3" />电动
                        </label>
                        <label class="radio">
                            <radio :value="4" :checked="FormData.power_type==4" />混合
                        </label>
                    </radio-group>
                </view>
                <view class="img">
                    <view class="type"><text>车辆照片</text></view>
                    <view class="kg">
                        <u-upload :fileList="fileList" ref="upload" :action="baseUrl + '/api/images/upload'"
                            :form-data="{ code: '999' }" width="150rpx" height="150rpx" @on-success="uploadSu"
                            @on-remove="oploadRe"></u-upload>
                    </view>
                </view>
            </view>
        </view>
        <view class="button">
            <button @click="postedit"><span>确定</span></button>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                FormData: {

                },
                fileList:[],
                baseUrl: ""
            }
        },
        props: {
            editFrom: Object
        },
        watch: {
            editFrom() {
                this.FormData = this.editFrom;
                this.fileList = this.getFileList()
            }
        },
        created() {
            this.baseUrl = this.$store.state.baseUrl;
            this.FormData = this.editFrom;
            this.fileList = this.getFileList()
        },
        methods: {
            getFileList() {
                const list = [];
                this.FormData.imgs.forEach((item) => {
                    list.push({
                        url: item
                    })
                })
                return list;
            },
            CloseWindow() {
                this.$emit('closewin');
            },
            oploadRe(index) {
                this.FormData.imgs.splice(index, 1);
                this.fileList = this.getFileList();
            },
            uploadSu(data) {
                this.FormData.imgs.push(data.data.url);
                this.fileList = this.getFileList();
            },
            postedit() {
                this.FormData.img = this.FormData.imgs.join(",");
                if (this.$u.test.isEmpty(this.FormData.plate_no)) {
                    uni.showToast({
                        title: '请输入车牌',
                        duration: 1000,
                        icon: 'none'
                    });
                    return;
                }
                if (this.$u.test.isEmpty(this.FormData.capacity)) {
                    uni.showToast({
                        title: '请输入载重',
                        duration: 1000,
                        icon: 'none'
                    });
                    return;
                }
                if (this.$u.test.isEmpty(this.FormData.img)) {
                    uni.showToast({
                        title: '请上传车辆照片',
                        duration: 1000,
                        icon: 'none'
                    });
                    return;
                }
                this.$u.api.postCar(this.FormData).then((res) => {
                    uni.showToast({
                        title: "保存成功",
                        duration: 1000,
                        icon: 'none'
                    });
                    this.$emit("reload_list");
                    this.$emit('closewin');
                })
            }

        }
    }
</script>

<style lang="scss" scoped>
    .all {
        position: relative;
        height: 100%;
    }

    .head {
        height: 88rpx;
        background-color: #ffffff;

        text {
            margin-left: 30rpx;
            line-height: 88rpx;
        }

        image {
            float: right;
            width: 85rpx;
            height: 85rpx;
        }
    }

    .box {
        padding: 20rpx;
        max-height: 800rpx;

        picker {
            width: 440rpx;
            height: 60rpx;
            background-color: #f7f7f7;
            border-radius: 10rpx;
            border: solid 2rpx #f2f2f2;
            padding: 0 28rpx;
            color: #999999;
            font-size: 28rpx;
            line-height: 60rpx;

            i {
                margin-top: 30rpx;
                float: right;
                width: 0;
                height: 0;
                border: 10rpx solid;
                border-color: #999999 transparent transparent;
            }
        }
    }

    .selecttype {
        margin-top: 30rpx;
        padding: 18rpx 0 25rpx 0;
        background-color: #ffffff;
        border-radius: 20rpx;

        view {
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        .type {
            border-bottom: 1px solid #eeeeee;
            padding-bottom: 15rpx;
        }

        .pic {
            width: 440rpx;
            height: 60rpx;
            background-color: #f7f7f7;
            border-radius: 10rpx;
            border: solid 2rpx #f2f2f2;
            padding: 0 28rpx;
            color: #999999;
            font-size: 28rpx;
            line-height: 60rpx;
            display: flex;
            justify-content: space-between;
        }
    }




    .oneprice {
        display: flex;
        align-items: center;
        margin-top: 10rpx;
        height: 98rpx;
        line-height: 98rpx;
        background-color: #ffffff;
        border-radius: 20rpx;
        padding: 0 30rpx;

        input {
            text-align: right;
            flex: 1;
            padding: 0 20px;
            line-height: 98rpx;
            height: 98rpx;
            color: #333;
            font-size: 14px;
            box-sizing: border-box;
        }

        .radio-group {
            flex: 1;
            text-align: right;
            display: flex;
            justify-content: flex-end;
        }
    }

    .img {
        margin-top: 30rpx;
        // height: 273rpx;
        // display: flex;
        // justify-content: space-around;
        // align-items: center;
        padding: 18rpx 29rpx 25rpx 29rpx;
        background-color: #ffffff;
        border-radius: 20rpx;

        .type {
            height: 98rpx;
            line-height: 98rpx;
            border-bottom: 1px solid #eeeeee;
            padding-bottom: 15rpx;

            text {
                margin-right: 505rpx;
            }
        }

        .kg {
            margin-top: 30rpx;
            width: 630rpx;
            border-radius: 10rpx;
            background-color: #ffffff;
            // margin-bottom: 210rpx;

            image {
                width: 120rpx;
                height: 120rpx;
                margin-right: 20rpx;
                background-color: #f2f2f2;
                border-radius: 10rpx;
            }
        }
    }

    .button {
        position: flexd;
        left: 10rpx;
        padding: 20rpx 0;
        height: 140rpx;
        background-color: #eeeeee;

        button {
            width: 670rpx;
            height: 98rpx;
            background-color: #1bc078;
            border-radius: 49rpx;
        }

        span {
            font-size: 28rpx;
            color: #ffffff;
        }
    }

    .colseshow {
        width: 750rpx;
        height: calc(100% - 1028rpx);
        opacity: 0.1;
        background-color: #000000;
    }

    .backgroundcolor {
        background-color: #eeeeee;
    }

    .label-text {
        background-color: #f0ad4e !important;
    }

    .radio {
        margin-right: 10rpx;
    }
</style>